<!-- 在办文书 -->
<template>
	<view class="content">
		<view class="navs_head">
			<text>检e达</text>
			<image src="../../static/img/onLineNavBg.png" mode=""></image>
		</view>
		<view class="notice_wrap" v-show="isShowFeedBack" @tap="checkTabs(2)">
			  <view class="notice_left">
			  	<image src="../../static/img/notice_logo.png" mode=""></image>
				<text>{{isShowFeedBack}}</text>
			  </view>
			  <image src="../../static/icon/arrow_right.png" mode=""></image>
		</view>
		 <!-- tab切换栏 -->
		 <view class="tabsList" >
		 	<view v-for="(item,index) in tabsList" :key="index" :class="{tabActive:index ===tabsActive}" @click="checkTabs(index)">
		 			{{item.value}}
		 	</view>
		 </view>
		<view class="cardList">
			<DatePicker @changeTime="changeTime" />
		<custom-pagination
			v-model:list="cardList"
			v-model:loading="loading"
			v-model:no-more-data="noMoreData"
			@refresh="refreshList"
			@load-more="loadMoreList"
		>
			<template #list>
					<CardWrap v-for="(item, index) in cardList" :key="index">
						<view class="card_title">
							<view>
								{{ stateFilter(item.state) }}时间：
								<text>{{tabsActive === 3 ? item.feedbackTime : tabsActive === 1 ? (item.signTime || item.firstViewTime) : tabsActive === 0 ? item.createTime :
item.signTime }}</text>
							</view>
							<view class="reciver" v-if="tabsActive === 1">
								发送时间：{{ item.createTime }}
							</view>
							<view
								class="feedBack"
								v-if="tabsActive === 2"
								:class="statesBgColor"
							>
								{{ expirationDate(item.feedbackExpireTime)}}
							</view>
						</view>
						<view
							class="card_content"
							:class="{ specialDire: tabsActive !== 0 }"
						>
							<view class="left">
								<text>{{filterDocument(item.deliveryType)}}</text>
								<text>{{item.deliveryDeptName}}-{{ item.unitName }}-{{item.contact}}</text>
							</view>
							<view class="right">
								<view class="reciver" v-if="tabsActive === 2">
									发送时间：{{item.createTime}}
								</view>
								<view class="seeDetailBtn" @click="seeDetail(item.id)">
									{{ tabsActive === 3 ? '查看反馈' : '查看' }}
								</view>
								<view
									class="downLoad"
									v-if="[1].includes(tabsActive) && ['1'].includes(item.acceptState)"
									@click="downLoad(item.acceptState,item.proofServiceUrl, item.recipientDept,item.id)"
								>
									<image
										src="../../static/icon/downLoad_blue.png"
										mode=""
										v-show="false"
									 ></image
									> 去签名
								</view>
								<view class="feedBackDom" v-if="tabsActive === 2" @tap="toFeedBackFile('1',item.id)">
								 <image src="../../static/icon/feedback.png" mode=""></image>
								 反馈
								</view>
								<view class="feedBackDom" v-if="tabsActive === 3" @tap="toFeedBackFile('2',item.id)">
								 补充材料
								</view>
							</view>
						</view>
					</CardWrap>
				</template>
				</custom-pagination>
		</view>
	</view>
<uni-popup ref="popup" background-color="#fff" borderRadius="25rpx">
<view class="popupWrap">
	<view class="contents scaleFont">
		 <template v-if="noticeStates === '0'">
			 为进一步提升办案质效，根据《电子签名法》等有关规定，通过本服务栏目将符合条件的法律文书及时送达，作为传统送达方式的补充。
		 </template>
		 <template v-else-if="noticeStates === '1'">
			 <view class="header">
			 	检察机关法律文书电子送达确认书
			 </view>
			 <view class="detail">
				 <view class="contents">
				 	为进一步方便行政机关参与、保障行政机关合法权益、提高办案质效，检察机关在崇明地区推行法律文书电子送达。请确认知悉以下内容:
				 </view>
				 <view class="contents">
					 一、电子送达法律文书的范围为检察建议书、检察意见书等。
				</view>
				<view class="contents">
					二、行政机关确认同意电子送达后，检察机关可通过政务网送达上述法律文书，行政机关应当根据收到的短信在规定期限内登录“随申办”政务云查看并签收法律文书，如无法查看的应当及时告知检察机关。行政机关登录“随申办”政务云查看法律文书签收后视为送达。行政机关无法登录或者接收查看法律文书的，可以要求检察机关通过邮寄等方式送达纸质法律文书。
				</view>
				<view class="contents">
					三、电子法律文书与纸质法律文书具有同等法律效力。电子法律文书送达后，行政机关需要纸质法律文书的，可联系检察机关。
				</view>
			 </view>
			 <view class="agreement"  @tap.prevent="isCheckAgree = !isCheckAgree">
				 <image :src="`../../static/icon/${isCheckAgree ? 'select' : 'select_no'}.png`" mode=""></image>
				 <view class="agreeContent">
				我已认真阅读并理解<text class="link" @tap.stop="seeConfirmBook">《检察机关法律文书电子送达确认书》</text>全部内容，同意检察机关通过政务网送达电子法律文书。
				 </view>
			 </view>
		 </template>
		 <template v-else>
			 <image src="../../static/icon/filePG.png" mode="" class="filePG"></image>
		 	<view class="header">
		 	 {{isShowFeedBack}}
		 	</view>
		 </template>
	</view>
	<view class="btn" @tap.capture="closeDialog"  :class="{agreeConfirm:noticeStates !== '0',noCheck:noticeStates === '1' && !isCheckAgree}">
	{{fileText(noticeStates)}}
	</view>
</view>
</uni-popup>
</template>

<script setup>
import { nextTick, ref,reactive, watch } from 'vue';
import {onLoad,onReady} from '@dcloudio/uni-app'
import {getDocumentList} from '@/api/file.js'
import {getPendingFeedbackReminder} from '@/api/document.js'
import {setPopu,getPopu} from '@/utils/auth.js'
const popup = ref(false);
const noticeStates  = ref("0")
const isCheckAgree = ref(false)
const popuList = ref([])
onReady(()=>{
	const storageList = getPopu() //获取弹出层
	const flag = storageList.length > 0 ? storageList.every(val=>["0","1"].includes(val)) : false
	if(!flag){
		popup.value.open("center")
	}
	setPendingFeedbackReminder()
})

const bookTypeList = ref([
	{id:1,value:"检察建议书"},
	{id:2,value:"检察意见书"},
	{id:3,value:"磋商书"},
])
const itemActive = ref(0)
const checkItem = (index)=>{
	itemActive.value = index
}
const tabsList = [
{id:1,value:"待签收"},
{id:2,value:"已签收"},
{id:3,value:"待反馈"},
{id:4,value:"已反馈"},
]
const tabsActive = ref(0)
const checkTabs = (index)=>{
	tabsActive.value = index
		refreshList()
}
const stateFilter = ()=>{
	let reciverName = ""
	 switch(tabsActive.value){
		 case 0:
		 reciverName = "发送"
		 break;
		 case 3:
		 reciverName ="反馈"
		 break;
		 default:
		 reciverName = "签收"
	 }
	 return reciverName
}
// 查看详情
const seeDetail = (id) => {
	if (tabsActive.value === 3) {
		uni.navigateTo({
			url: `/pages/alreadyFeedBack/alreadyFeedBack?deliveryId=${id}`,
		})
	} else if ([0, 1, 2].includes(tabsActive.value)) {
		uni.navigateTo({
			url: `/pages/fileList/fileList?type=${tabsActive.value}&id=${id}&signReceipt=${tabsActive.value ===  0}`,
		})
	}
}
// 前往去反馈添加资料(1:反馈,2:补充资料)
const toFeedBackFile = (type,id)=>{
	switch(type){
		case "1":
		uni.navigateTo({
			url:`/pages/feedBack/feedBack?id=${id}`
		})
		break;
		case "2":
		uni.navigateTo({
			url:`/pages/supplyInfo/supplyInfo?id=${id}`
		})
		break;
	}
}
// 获取反馈信息
const isShowFeedBack = ref("")
const setPendingFeedbackReminder = async()=>{
const {code,msg} = await getPendingFeedbackReminder()
if(code === 200){
	if(msg){
		isShowFeedBack.value = msg
	}else{
		isShowFeedBack.value = ""
	}
}
}
// 关闭弹框
const closeDialog = ()=>{
	const popList = getPopu()
	popList.push(noticeStates.value)
	setPopu(popList)
	switch(noticeStates.value){
		case "0":
		noticeStates.value = "1"
		break;
		case "1":
		if(isCheckAgree.value){
			if(isShowFeedBack.value){
				noticeStates.value = "2"
			}else{
				popup.value.close()
			}
		}
		break;
		case "2":
		popup.value.close()
		break;
	}

}
// 获取btn文案
const fileText = (val)=>{
	let str = ""
	switch(val){
		case "0":
		str = "我知道了"
		break;
		case "1":
		str = "确认"
		break;
		case "2":
		str = "确认"
		break;
	}
	return str
}

//查看详情书
const seeConfirmBook = ()=>{
	console.log("查看详情书");
}
// 分页功能区域代码
const cardList = ref([]) //分页列表
const loading = ref(false) //数据加载中
const noMoreData = ref(false) //暂无更多数据
// 获取文书列表
const postData = reactive({
	acceptState: '', //接收状态（0待签收 1已签收 2待反馈 3已反馈）
	startTime: '',
	endTime: '',
	pageNum: 1,
	pageSize: 10,
})
const getPageList = async (refresh = false) => {
	loading.value = true
	postData.acceptState = tabsActive.value
	try {
		const { code, data: res } = await getDocumentList(postData)
		if (code === 200) {
			const { total, list } = res
			if (refresh) {
				cardList.value = list
			} else {
				cardList.value = [...cardList.value, ...list]
			}
			noMoreData.value = total <= postData.pageSize * postData.pageNum
			if (!noMoreData.value) {
				postData.pageNum++
			}
		}
	} catch (e) {
		//TODO handle the exception
		return Promise.reject('获取数据失败', e)
	} finally {
		loading.value = false
	}
}
const refreshList = async () => {
	cardList.value = []
	postData.pageNum = 1
	noMoreData.value = false
	await getPageList(true)
}
const loadMoreList = async () => {
	if (!noMoreData.value) {
		await getPageList(false)
	}
}
const changeTime = (val) => {
	postData.startTime = val[0]
	postData.endTime = val[1]
	refreshList()
}
// 计算间隔时间
const statesBgColor = ref('')
const expirationDate = (date) => {
	const targetDate = new Date(date)
	// 获取当前日期
	const currentDate = new Date()
	// 计算时间差（以毫秒为单位）
	const timeDifference = targetDate - currentDate
	// 将时间差转换为天数（1天 = 24 * 60 * 60 * 1000 毫秒）
	const daysUntilExpiration = Math.ceil(timeDifference / (24 * 60 * 60 * 1000))
	if (daysUntilExpiration < 0) {
		statesBgColor.value = 'feedBackDanger'
		return `已经过期了${Math.abs(daysUntilExpiration)}天`
	} else if (daysUntilExpiration === 0) {
		statesBgColor.value = 'feedBackDanger'
		return `已经过期了`
	} else {
		statesBgColor.value = 'feedBackWran'
		return `${daysUntilExpiration}天后超期`
	}
}
// 下载
const downLoad = (flag,url, name,id) => {
	// #ifdef H5
	//flag为"1"的时候为未签名状态
	if(flag === "1"){
		uni.redirectTo({
			url:`/pages/signatureBrand/signatureBrand?deliveryId=${id}`
		})
		return
	}
	const fileType = url.split('.').pop()
	uni.downloadFile({
		url,
		success(res) {
			console.log('下载文件成功！', res)
			if (res.statusCode === 200) {
				const tempFilePath = res.tempFilePath
				// #ifdef H5
				// H5环境下，创建下载链接
				const a = document.createElement('a')
				a.href = tempFilePath
				a.download = `${name}.${fileType}` // 替换为实际的文件名
				document.body.appendChild(a)
				a.click()
				document.body.removeChild(a)
				uni.hideLoading()
				uni.showToast({ title: '下载完成', icon: 'success' })
				// #endif
			}
		},
	})
	// #endif
}
// 文件类型过滤
const filterDocument = (type)=>{
	// （1 检察建议书 2 检察意见书 3 磋商文书）
	const documentFile = {"1":"检察建议书","2":"检察意见书","3":"磋商文书"}
	return documentFile[type] || "未知文件"
}
</script>

<style lang="scss" scoped>
.content{
	min-height: 100vh;
	background-color: #f5faff;
	.navs_head{
		height: 10vh;
		padding-bottom: 20rpx;
		position: relative;
		>image{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		>text{
			position: absolute;
			left: 32rpx;
			bottom: 50rpx;
			font-weight: normal;
			font-size: 48rpx;
			color: #00041A;
			line-height: 58rpx;
			z-index: 2;
		}

	}
	.tabsList{
		display: flex;
		justify-content: space-between;
		margin: 32rpx;
		>view{
			width: 148rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
		}
		.tabActive{
			background-color: #0D53FE;
			color: #ffffff;
		}
	}
	.selectDate{
		display: flex;
		justify-content: center;
		margin-bottom: 35rpx;
		text{
			&:first-child{
				color: #66686A;
			}
			&:nth-child(2){
				color: #BBC0C9;
				margin: 0 100rpx;
			}
			&:last-child{
				color: #66686A;
			}
		}
	}
	.cardList{
		height: calc(84vh - 185rpx);
		padding:0 35rpx 35rpx; 
		.card_title{
			padding-bottom: 35rpx;
			border-bottom: 1rpx solid #F2F6F9;
			font-weight: 600;
			font-size: 24rpx;
			color: #00041A;
			display: flex;
			justify-content: space-between;
				.reciver{
					font-weight: 400;
					font-size: 20rpx;
					color: #BBC0C9;
					background: #FCFCFE;
					border-radius: 4rpx;
					border: 1rpx solid #F2F6F9;
					line-height: 28rpx;
					padding: 4rpx 10rpx;
				}
				.feedBack{
					font-weight: 400;
					font-size: 20rpx;
					background: #FCFCFE;
					border-radius: 4rpx;
					line-height: 28rpx;
					padding: 4rpx 10rpx;
				}
				.feedBackDanger{
					color: #FF4122;
					border: 1rpx solid #FFC0B6;
					background-color: #FFE8E4;
				}
				.feedBackWran{
					color: #FAD34A;
					background: #FFFDF5;
					border: 1rpx solid #FFECAB;
				}
			
		}
		.card_content{
			padding-top: 35rpx;
			display: flex;
			justify-content: space-between;
			.left{
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				text{
					&:first-child{
						font-weight: 600;
						font-size: 32rpx;
						color: #00041A;
						line-height: 45rpx;
						margin-bottom: 10rpx;
					}
					&:last-child{
						font-weight: 400;
						font-size: 24rpx;
						color: #686A73;
						line-height: 33rpx;
						margin-bottom: 10rpx;
					}
				}
			}
			.right{
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				position: relative;
				.seeDetailBtn{
					font-weight: 400;
					font-size: 28rpx;
					color: #66686A;
					width: 148rpx;
					height: 62rpx;
					text-align: center;
					line-height: 62rpx;
					background: #F7F9FD;
					border-radius: 8rpx;
				}
				.downLoad,.feedBackDom{
					background: #F0F5FF;
					border-radius: 8rpx;
					width: 148rpx;
					height: 62rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #0D53FE;
					text-align: center;
					line-height: 62rpx;
					margin-left: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					>image{
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}
				}
				.feedBackDom{
				>image{
					margin-top: 5rpx;
				}	
				}
				.reciver{
					font-size: 24rpx;
					position: absolute;
					left: 0;
					bottom: 0;
					font-weight: 400;
					font-size: 20rpx;
					color: #BBC0C9;
				}
			}
		}
		.specialDire{
			flex-direction: column;
		}
	}
}
:deep(.uni-popup){
>view{
	view{
		padding-bottom: 0 !important;
	}
}	
}
		.notice_wrap{
			margin: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 72rpx;
			border-radius: 16rpx;
			background-color:#fcf4da ;
			padding: 0 32rpx 0 10rpx;
			.notice_left{
				display: flex;
				align-items: center;
				width: calc(100% - 35rpx);
				image{
					flex-shrink: 0;
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #00041A;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			>image{
				width: 24rpx;
				height: 24rpx;
			}
		}
		// 弹出层容器
		.popupWrap{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #44474A;
			border-radius: 25rpx;
			width: 686rpx;
			padding:80rpx 48rpx 48rpx 48rpx;
			background: linear-gradient(to bottom, #e6f7ff, white);
			.contents{
				font-weight: 400;
				font-size: 24rpx;
				color: #44474A;
				line-height: 48rpx;
				text-indent: 2em;
				.header{
					text-align: center;
					font-weight: 600;
					font-size: 32rpx;
					color: #00041A;
					margin-bottom: 32rpx;
				}
				.agreement{
					margin-top: 32rpx;
					font-size: 20rpx;
					display: flex;
					color: #00041A;
					line-height: 36rpx;
					text-indent: 0;
					.link{
						color: #0D53FE;
						font-size: 20rpx;
					}

					>image{
						margin-top: 5rpx;
						flex-shrink: 0;
						width: 24rpx;
						height: 24rpx;
						margin-right: 18rpx;
					}
					
				}
			}
			.scaleFont{
				font-size: 28rpx;
				text-align: justify;
				font-style: normal;
			}
			.btn{
				height: 100rpx;
				background: #EAF0FF;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #0D53FE;
				text-align: center;
				line-height: 100rpx;
				margin:70rpx 0 32rpx 0;
			}
			.agreeConfirm {
			 color: #FFFFFF;
			 background: #0D53FE;
			}
			.noCheck{
				background: #EAF0FF;
			}
			.filePG{
				display: block;
				width: 252rpx;
				height: 180rpx;
				margin: 0 auto;
			}
			
		}
</style>
